<script setup lang="tsx">
import { reactive, ref } from "vue";

import { formatDate } from "@vben/utils";

import {
  Button,
  Card,
  Divider,
  List,
  ListItem,
  message,
  Modal,
  Space,
  Tooltip,
} from "ant-design-vue";

import { basicProps } from "./props";

const props = defineProps(basicProps);
const emit = defineEmits(["changeCard", "delete", "clickComponent"]);

const cardList = ref<any[]>([]);
const initLoading = ref(false);
const loading = ref(false);
const totalCount = ref(0);
const params = reactive({
  page: 1,
  pageSize: 50,
});

const getComponentList = async () => {
  const data = await props.api({ ...props.formParams, ...params });
  loading.value && (cardList.value = [...cardList.value, ...data.list]);
  !loading.value && (cardList.value = data.list);
  totalCount.value = data.totalCount;
  initLoading.value = false;
  loading.value = false;
};

getComponentList();
function onLoadMore() {
  params.page++;
  loading.value = true;
  getComponentList();
}
function reload() {
  params.page = 1;
  getComponentList();
}
function changeCard(item: any) {
  emit("changeCard", item);
}
function delParts(id: any) {
  if (props.delApi) {
    Modal.confirm({
      title: props.delText.text,
      content: props.delText.content,
      onOk: async () => {
        await props.delApi(id);
        message.success("删除成功");
        getComponentList();
      },
    });
  } else {
    emit("delete", id);
  }
}
function handleClick(e: any) {
  emit("clickComponent", e);
}
defineExpose({
  reload,
});

// watch(
//   () => props.formParams,
//   (oldVal, newVal) => {
//     console.log(props.formParams, 'props.formParams');
//     getComponentList();
//   },
//   { deep: true, immediate: true },
// );
const grid = ref({ xs: 1, sm: 2, md: 2, lg: 3, xl: 4, xxl: 5 });
window.addEventListener("resize", () => {
  reload();
  if (document.body.clientWidth < 1278 && document.body.clientWidth >= 621) {
    grid.value = { xs: 1, sm: 2, md: 2, lg: 3, xl: 3, xxl: 5 };
  }
  if (document.body.clientWidth >= 1278 && document.body.clientWidth < 1920) {
    grid.value = { xs: 1, sm: 2, md: 2, lg: 3, xl: 4, xxl: 5 };
  }

  if (document.body.clientWidth < 621) {
    grid.value = { xs: 1, sm: 1, md: 2, lg: 3, xl: 4, xxl: 5 };
  }
});
</script>
<template>
  <div style="height: 100%">
    <slot name="header"></slot>
    <div v-if="cardList.length > 0" class="mt-2" style="overflow-y: auto">
      <List
        :data-source="cardList"
        :grid="grid"
        :loading="initLoading"
        class="h-full overflow-auto"
      >
        <template #loadMore>
          <div
            v-if="
              cardList.length < (totalCount ?? 0) && totalCount !== undefined
            "
            :style="{
              textAlign: 'center',
              marginTop: '12px',
              height: '32px',
              lineHeight: '32px',
            }"
          >
            <Button @click="onLoadMore">加载更多</Button>
          </div>
        </template>
        <template #renderItem="{ item }">
          <ListItem class="mt-5">
            <Card
              :title="
                props.titleEnum
                  ? props.titleEnum[item[props.titleKey]]
                  : item[props.titleKey]
              "
              class="w-[280px]"
              hoverable
            >
              <div
                v-for="(it, index) in props.content"
                :key="index"
                class="flex justify-start overflow-hidden truncate text-ellipsis whitespace-nowrap"
              >
                <span v-if="it.description" class="mr-2 text-slate-950">
                  {{ it?.description }}
                </span>

                <span v-if="it.slot">
                  <component
                    :is="it.slot"
                    :checked="
                      item[props.componentProps?.checkedKey] ===
                      props.componentProps.checkedValue
                        ? true
                        : false
                    "
                    :value="item[props.componentProps?.value]"
                    @click="handleClick(item)"
                  />
                </span>
                <div v-for="(i, ins) in it?.field" :key="ins">
                  <span v-if="it.date">
                    <Tooltip :title="formatDate(item[String(i)], it.date)">
                      {{ formatDate(item[String(i)], it.date) }}
                    </Tooltip>
                  </span>
                  <span v-if="it.prev || it.next">
                    <Tooltip
                      :title="`${it.prev ?? ''}${item[String(i)]}${
                        it.next ?? ''
                      } `"
                    >
                      {{ it.prev ?? "" }} {{ item[String(i)] }}
                      {{ it.next ?? "" }}
                    </Tooltip>
                  </span>
                  <span v-if="!it.date && (!it.prev || !it.next)">
                    <Tooltip
                      :title="
                        it.enum && it.enum[item[String(i)]]
                          ? it.enum[item[String(i)]]
                          : item[String(i)]
                      "
                    >
                      {{
                        it.enum && it.enum[item[String(i)]]
                          ? it.enum[item[String(i)]]
                          : item[String(i)]
                      }}
                    </Tooltip>
                  </span>
                </div>
              </div>
              <Divider />
              <Space>
                <Tooltip :title="props.tooltip ? '修改' : ''" color="blue">
                  <Button type="primary" @click="changeCard(item)">修改</Button>
                </Tooltip>
                <Tooltip :title="props.tooltip ? '删除' : ''" color="red">
                  <Button @click="delParts(item.id)">删除</Button>
                </Tooltip>
                <slot name="button"></slot>
              </Space>
            </Card>
          </ListItem>
        </template>
      </List>
    </div>
  </div>
</template>
<style scoped lang="scss"></style>
